<template>
  <view class="wrapper">
    <view v-if="index === 0 && data.cityName !== currentCity" class="empty flex justify-center item-center flex-col my-34">
      <image style="width:53px;height:40px;" src="@/static/svg/empty-index.svg"></image>
      <view>当前城市暂无活动～</view>
    </view>
    <view v-if="(preCity === currentCity && data.cityName !== currentCity) || (!preCity && data.cityName !== currentCity)" class="divider flex justify-center mb-16">
      —— 其他城市活动 ——
    </view>
    <view v-if="data" class="radius-12 bg-white px-12 py-16" :class="$attrs" @click="onItemClick">
      <view class="flex justify-between item-center">
        <view class="flex item-center flex-1 w-0">
          <image :src="data.logo" class="cu-avatar round size-44 mr-8 flex-shrink" @click.stop="toMerchant"></image>
          <view class="flex-col mr-8 text-cut">
            <text class="fs-16 text-color-regular text-cut" @click.stop="toMerchant">{{data.businessShortName}}</text>
            <!-- <text class="mt-2 fs-12 text-color-hint">{{formatBeginTime(data.releaseTime)}}</text> -->
          </view>
          <subscribe-button class="flex-shrink" :userId="userStore.userInfo && userStore.userInfo.id" :businessId="data.businessId" :state="data.subscribeState" @onStateChange="toRefresh" />
        </view>
        <view v-if="data.agentShareState === 1" class="ml-10 color-primary fs-14 font-bold">推广中</view>
        <!--
				<view class="flex-shrink ml-8 inline-flex center h-28 px-8 py-4 border-secondary-info color-secondary-info fs-12 font-normal leading-22" style="box-sizing:border-box;border-radius:100px;" @click.stop="toShare">
					<image v-if="data.haveAgent" class="size-20 mr-2" src="@/static/image/icon-value-share.png"></image>
					<image v-else class="size-20 mr-2" src="@/static/svg/icon-share-blue.svg"></image>
					<text>分享</text>
				</view>
				-->
      </view>
      <view class="h-1 bg-default my-8"></view>
      <view class="fs-16 text-color-regular font-semibold leading-22 mb-8 two-lines-ellipsis">
        <!-- <sign-up-tag v-if="isSignUp" class="mr-8" /> -->
        <tag v-if="data.promotionLabel" class="mr-4">{{ data.promotionLabel }}</tag>
        <text class="align-middle">{{data.activeTitle}}</text>
      </view>
      <view class="flex item-center mb-12">
        <text class="fs-21 color-primary font-semibold leading-22 mr-11"><text class="fs-14 font-normal">¥</text>{{numberFormat(data.activePrice)}}</text>
        <newcomer-coupon-tag v-if="data.activeRedPacket" :price="numberFormat(data.activeRedPacket.firstRedPacketAmt)" class="mr-10" />
        <template v-if="data.activeDiscount && data.activeDiscount.length <= 2">
          <full-discount-tag v-for="(item,index) in data.activeDiscount" :key="index" :data="item" class="mr-10" />
        </template>
      </view>
      <view v-if="data.activeDiscount && data.activeDiscount.length===3" class="mb-12">
        <full-discount-tag v-for="(item,index) in data.activeDiscount" :key="index" :data="item" class="mr-10" />
      </view>
      <view v-if="isSignUp && activityInfo.activeStepPrices && activityInfo.activeStepPrices.length" class="mt-7">
        <sign-up-number-tag v-for="(item,index) in activityInfo.activeStepPrices" :key="index" :number="item.enrollNum" :price="numberFormat(activityInfo.activePrice - item.enrollPrice,2)" :type="2" class="mr-8" />
      </view>
      <!--
			<scroll-view v-if="photos.length > 1" scroll-x="true" class="photos-view my-12 w-full" style="white-space:nowrap;">
				<block v-for="(item,index) in photos.filter((_,i) => i < 3)" :key="index">
					<video v-if="isVideoFile(item)" class="overflow-hidden radius-8" :class="index===2?'':'mr-6'" style="width:calc((100% - 12px)/3);height:105px;" :src="item"></video>
					<image v-else class="overflow-hidden radius-8" :class="index===2?'':'mr-6'" mode="aspectFill" style="width:calc((100% - 12px)/3);height:105px;" :src="item"></image>
				</block>
			</scroll-view>
			<view v-else-if="photos.length === 1" class="photos-view my-12">
				<video v-if="isVideoFile(photos[0])" class="radius-8 w-full overflow-hidden" style="height:150px;" :src="photos[0]"></video>
				<image v-else class="radius-8 w-full overflow-hidden" style="height:150px;" mode="aspectFill" :src="photos[0]"></image>
			</view>
			-->
      <!-- 活动列表默认显示单图（显示活动图片首张图片）-->
      <view v-if="coverPicture" class="photos-view my-12">
        <image class="radius-8 w-full overflow-hidden" style="height:212px;" mode="aspectFill" :src="coverPicture"></image>
      </view>
      <view class="flex justify-between item-center">
        <view v-if="data.commissionAmt || data.rewardPoints || data.agentShareCount" class="inline-flex item-center px-8 py-2 fs-12 radius-14 bg-pale-yellow border-secondary-warning">
          <text v-if="data.commissionAmt">佣金: <text class="color-primary fs-14">¥{{ data.commissionAmt }}</text></text>
          <text v-if="data.rewardPoints">积分: <text class="color-primary fs-14">{{ data.rewardPoints }}</text></text>
          <text v-if="data.agentShareCount" :class="(data.commissionAmt || data.rewardPoints) ? 'ml-12' : ''" class="color-secondary-warning">{{ data.agentShareCount }}位经纪人正在推广</text>
        </view>
        <view class="inline-flex item-center px-8 py-4 radius-20 bg-default" v-else>
          <template v-if="data.avatars && data.avatars.length">
            <image v-for="(img,i) in data.avatars" :key="i" class="size-20 radius-20" :style="[1,2].includes(i) ? `z-index:${i+1};margin-left:-8px;` : ''" style="border:0.5px solid #FFF" :src="img"></image>
          </template>
          <!-- <template v-if="isSignUp && data.buyNum">
            <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">{{data.buyNum}}人报名</text>
          </template>
          <template v-else-if="!isSignUp && data.buyNum">
            <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">已售{{data.buyNum}}份</text>
          </template>
          <text v-if="data.buyNum" class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">｜</text>
          <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">{{data.browseNum}}人看过</text> -->
          <template v-if="isSignUp">
            <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">{{data.buyNum + (data.virtualSaleNum?data.virtualSaleNum:0)}}人报名</text>
          </template>
          <template v-else-if="!isSignUp">
            <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">已售{{data.buyNum + (data.virtualSaleNum?data.virtualSaleNum:0)}}份</text>
          </template>
          <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">｜</text>
          <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">{{data.browseNum + data.virtualSaleNum * data.virtualNum}}人看过</text>
        </view>
        <image v-if="data.haveAgent" class="size-24" src="@/static/svg/icon-relay.svg" @click.stop="toShare"></image>
        <view v-else class="inline-flex center px-16 h-30 radius-8 bg-primary text-white fs-14 font-normal leading-22" @click.stop="toDetail">{{isSignUp? '立即报名' : '立即抢购'}}</view>
      </view>
      <view v-if="data.commissionAmt || data.agentShareCount" class="inline-flex item-center px-8 py-4 radius-20 bg-default mt-15">
        <template v-if="data.avatars && data.avatars.length">
          <image v-for="(img,i) in data.avatars" :key="i" class="size-20 radius-20" :style="[1,2].includes(i) ? `z-index:${i+1};margin-left:-8px;` : ''" style="border:0.5px solid #FFF" :src="img"></image>
        </template>
        <template v-if="isSignUp">
          <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">{{data.buyNum + (data.virtualSaleNum?data.virtualSaleNum:0)}}人报名</text>
        </template>
        <template v-else-if="!isSignUp">
          <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">已售{{data.buyNum + (data.virtualSaleNum?data.virtualSaleNum:0)}}份</text>
        </template>
        <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">｜</text>
        <text class="ml-4 fs-10 font-normal leading-22" style="color:#858585;">{{data.browseNum + data.virtualSaleNum * data.virtualNum}}人看过</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watchEffect } from 'vue'
import { useUserStore } from '@/stores/modules/user.js'
import { formatBeginTime, isVideoFile, numberFormat } from '@/utils/index.js'
import { useActivity } from '@/hooks/useActivity.js'
import Tag from '@/components/tag/tag.vue'


const userStore = useUserStore()
const { isSignUp, isLink, photos, coverPicture, activityInfo, updateActivityInfo } = useActivity()

const props = defineProps({
  data: {
    type: Object,
    required: true
  },
  preCity: { type: String },
  currentCity: { type: String },
  index: { type: Number }
})

watchEffect(() => {
  updateActivityInfo(props.data)
})

const emits = defineEmits(['click', 'refresh', 'share'])

const toMerchant = () => {
  uni.navigateTo({
    url: `/pagesA/merchant/homepage?id=${props.data.businessId}`
  })
}

const toDetail = () => {
  const url = props.data.promotionType === 'GROUP_BUY'
    ? `/pagesB/activity/activity-group-buy`
    : `/pagesB/activity/activity`;
  uni.navigateTo({
    url: `${url}?id=${props.data.id}&_from=CActivityItem`
  })
}

const onItemClick = () => {
  toDetail()
  emits('click', props.data)
}

const toRefresh = () => {
  emits('refresh', {
    type: 'subscribe',
    businessId: props.data.businessId,
    state: props.data.subscribeState
  })
}

const toShare = async () => {
  emits('share')
}
</script>
<style scoped lang="scss">
.wrapper {
  .empty {
    font-size: 10px;
    color: rgba(51, 51, 51, 0.6);
  }
  .divider {
    font-size: 12px;
    color: rgba(51, 51, 51, 0.3);
  }
}
</style>